<template>
  <div class="contaienr">
    <van-tabs v-model="active" class="mb10" @click="onClick">
      <van-tab :title="item.name" v-for="(item,index) in tabs" :key="index" />
    </van-tabs>
    <van-list v-model="loading" :finished="finished" :finished-text="finishedTxt" @load="onListLoad">
      <div class="list-item" v-for="item1 in list" :key="item1.id">
        <van-panel class="panel" :title="'投诉编号：'+item1.id" :status="item1.answer ? '已受理' : '未受理'">
          <div>
              <van-card
                :title="'投诉内容：'+item1.content"/>
            <div class="bottom-control" v-if="item1.answer">
              <span style="color:#ee0a24">官方回复：</span>{{item1.answer}}
          </div>
          </div>
          <!-- <div slot="footer" class="panel-actions" v-if="item[0].status === 1">
            <router-link :to="'/goods-detail/'+item[0].goods.id">
              <div class="panel-button panel-button-danger">评价</div>
            </router-link>
          </div> -->
        </van-panel>
      </div>
    </van-list>
  </div>
</template>

<script>
import { debounce } from '@/common/util'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      tabs: [
        { name: '全部', status: '' }
      ],
      active: 0,
      goodsMap: {},
      list: [],
      page: 1,
      pageSize: 10,
      loading: false,
      finished: false,
      finishedTxt: '没有更多了'
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    // const status = this.$route.query.status === undefined ? '' : this.$route.query.status
    // this.active = this.tabs.findIndex(item => item.status === status)
  },
  methods: {
    onListLoad() {
      this.getComplainList()
    },
    onClick: debounce(function(index) {
      this.loading = true
      this.finished = false
      this.getComplainList()
    }, 1000),
    /**
     * 获取投诉列表
     */
    getComplainList() {
      const query = {
        userId: this.user.id
      }
      this.$api.shop.getOwnComplain(query).then(res => {
        if (res.code === 200) {
          this.list = res.data
          this.loading = false
          this.finished = true
        }
      })
    },
    /**
     * 取消投诉
     */
    resetComplain(id) {
      const params = {
        id: id
      }
      this.$api.cart.deleteComplain(params).then(res => {
        if (res.code === 200) {
          this.$toast({
            type: 'success',
            message: '删除成功~'
          })
          this.getComplainList()
        }
      })
    },
    /**
     * 去投诉详情
     */
    toComplainDetail(id) {
      this.$router.push({
        path: '/complain-detail',
        query: {
          id: id
        }
      })
    },
    /**
     * 取消投诉
     */
    onCancelComplain(id) {
      this.$dialog.confirm({
        // title: '提示',
        message: '投诉还未付款,确定要取消吗?',
        cancelButtonText: '在考虑下',
        confirmButtonText: '取消投诉'
      }).then(() => {
        this.$toast.loading({
          mask: true,
          message: '加载中...',
          duration: 0
        })
        this.$toast({ message: '取消投诉成功', duration: 1500 })
        this.list.splice(this.list.findIndex(item => item.id === id), 1)
      }).catch(() => {
      })
    },
    /**
     * 确认付款
     */
    onPayComplain(data) {
      const complainId = data.id
      const amountReal = data.amountReal
      this.$toast.loading({
        mask: true,
        message: '支付提交中',
        duration: 0
      })
      this.$toast.clear()
      this.$dialog.confirm({
        title: '支付成功',
        message: `实付￥${amountReal}`,
        cancelButtonText: '返回首页',
        confirmButtonText: '查看投诉'
      }).then(() => {
        this.$router.replace({ path: '/complain-detail', query: { id: complainId }})
      }).catch(() => {
        this.$router.replace({ path: '/home' })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.list-item {
  margin-bottom: 20px;
  .van-cell__title{
    white-space: nowrap;
    width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bottom-control{
    display: flex;
    flex-flow: row nowrap;
    // justify-content: space-around;
    align-items: center;
    padding-left: 10px;
  }
}
.card-load-more{
  font-size: 14px;
  color:#f44;
  padding:5px;
  line-height:28px;
  text-align:center;
}
.panel {
  .van-panel__header-value {
    flex: none;
  }
  &-money {
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    text-align: right;
  }
  &-actions {
    text-align: right;
  }
  &-button {
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    padding: 4px 12px;
    bcomplain-radius: 20px;
    color: #666;
    bcomplain: 1px solid #b9b9b9;
  }
  &-button-danger {
    color: #f44;
    bcomplain: 1px solid #f44;
  }
  &-button::active {
    opacity: 0.8;
  }
}
.no-data .van-loading__spinner {
  display: none;
}
</style>

